import {View, Image} from '@tarojs/components';
import Popup from '../../../Popup';
import Icon from '../../../../../components/Icon';
import s from './index.module.scss'
import Taro from '@tarojs/taro';


function ChooseProduct (props) {

  const {show, setShow, setButtonPosition, isShowed, isClosed} = props

  // popup出现之后button计算位置信息
  // 计算Add to cart的初始位置
  // 计算Add to cart 按钮需要移动的位置
  function calcPosition () {
    Taro.createSelectorQuery().select(`.${s.add_to_cart}`).boundingClientRect((rect1:any) => {
      let buttonX = rect1.left ;
      let buttonY = rect1.top;
      setButtonPosition({x: buttonX, y: buttonY})
    }).exec();
  }

  function __openHandle () {
    calcPosition()
    if(isShowed) {
      isShowed()
    }
  }

  function __closeHandle () {
    if(isClosed) {
      isClosed()
    }
    setShow(false)

  }

  return (
    <View>
      <Popup show={show} onMaskClick={__closeHandle} opened={__openHandle} >
        <View className={s.purchase}>
          <View className={s.purchase_container}>
            <View className={s.product_info}>
              <View className={s.product_image_container}>
                <Image
                  style='width: 144px; height: 144px;'
                  src='https://www.midowatches.com/media/catalog/product/cache/aaadd316e453df5b08f7f4246fad1a9c/M/0/M021.207.16.296.00_0_front_1_1.png'/>
              </View>
              <View className={s.product_description}>
                <View className={s.product_name}>Metro Parrot Blush Leather Watch</View>
                <View className={s.product_price}>$ 195.00</View>
              </View>
            </View>
            <View className={s.divider}></View>
            <View className={s.color_list}>
              <View className={s.color_description}>COLOR CATEGORY</View>
              <View className={s.button_container}>
                <View className={s.button}>BLUE</View>
                <View className={s.button}>GRAY</View>
                <View className={s.button}>SILVER</View>
              </View>
            </View>
            <View className={s.to_cart_wrapper}>
              <View className={s.add_to_cart} >
                <Icon className={s.icon} name='rect_210' size={24} color='#FFF'/>
                <View className={s.title} >ADD TO CART</View>
              </View>
            </View>
          </View>
        </View>
      </Popup>
    </View>
  )
}


export  default ChooseProduct